// 这个文件就是webpack的配置文件

// 配置文件是node文件，需要使用CommonJs规范
const path = require("path");
// 插件和转换器不同的是，插件需要引入
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 模式(mode)
  mode: "production", // production生产环境(默认) development开发环境

  // 配置入口文件
  entry: "./src/main.js",

  // 配置出口文件
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },

  // 转换器loader, 本来webpack是只认识js和json文件，作用是将其他类型的文件转成js文件，让webpack认识
  module: {
    // rules是一个数组，里面的每一个对象表示一个转换规则
    // 所有的转换器都是需要安装的
    rules: [
      {
        test: /\.css$/i,
        // 如果同时使用了多个转换器，那么需要将先用的写在后面
        use: ["style-loader", "css-loader"],
      },
      // {
      //   ...
      // }
    ],
  },

  // loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
  // 转换器做不了的，插件做
  plugins: [
    // 数组里面的一项就是一个插件
    new HtmlWebpackPlugin({
      // 指定哪个html
      template: path.resolve(__dirname, "./src/public/index.html"),
      filename: "./index.html",
    }),
  ],
};
